<template>
    <el-container :style="{height:lheight}" class="box">
        <el-header>
            <!--头部-->
            <el-row class="qcb">
                <el-col :span="24" class="hBox">
                    <div>
                        <router-link to="/">
                            <img src="../../public/img/logo.png">小木
                        </router-link>
                    </div>
                    <div>
                        <router-link to="#"><span class="el-icon-bell"></span></router-link>
                        <el-dropdown>
                            <el-button type="button" class="qbtn">
                                <img src="../../public/img/hlogo.jpg">欢迎您管理员<i
                                    class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人信息</el-dropdown-item>
                                <el-dropdown-item>系统设置</el-dropdown-item>
                                <el-dropdown-item>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container :style="{height:lheight2}">
            <!--侧边栏-->
            <el-aside width="250px" :style="{height:lheight2}">
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo">
                            <!--首页-->
<!--                            <el-menu-item index="1">-->
<!--                                <router-link to="/home">-->
<!--                                    <span class="el-icon-s-home"></span>-->
<!--                                    <span>后台首页</span>-->
<!--                                </router-link>-->
<!--                            </el-menu-item>-->
                            <!--商品管理-->
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-s-platform"></i>
                                    <span>二手管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1">
                                        <router-link to="/ProManagerController">
                                            <span>二手商品管理</span>
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="1-2">
                                        <router-link to="/KindsController">
                                            <span>捐赠品管理</span>
                                        </router-link>
                                    </el-menu-item>
<!--                                    <el-menu-item index="1-3">-->
<!--                                        <router-link to="/DetailController">-->
<!--                                            <span>详情管理</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
                                </el-menu-item-group>
                            </el-submenu>
                            <!--订单管理-->
<!--                            <el-submenu index="3">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-s-order"></i>-->
<!--                                    <span>订单管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="3-1"  >-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>订单类表</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="3-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>订单处理</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="3-3">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>物流管理</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="3-4">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>退款操作</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
                            <!--会员管理-->
                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-user-solid"></i>
                                    <span>用户和员工管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1"  >
                                        <router-link to="/isvip">
                                            <span>用户管理</span>
                                        </router-link>
                                    </el-menu-item>
                                    <el-menu-item index="4-2"  >
                                        <router-link to="/isclass">
                                            <span>员工管理</span>
                                        </router-link>
                                    </el-menu-item>
<!--                                    <el-menu-item index="4-2">-->
<!--                                        <router-link to="/isclass">-->
<!--                                            <span>等级管理</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="4-3">-->
<!--                                        <router-link to="/islog">-->
<!--                                            <span>会员记录</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
                                </el-menu-item-group>
                            </el-submenu>
                            <!--文章管理-->
<!--                            <el-submenu index="5">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-office-building"></i>-->
<!--                                    <span>文章管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="5-1">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>文章列表</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
<!--                            &lt;!&ndash;广告管理&ndash;&gt;-->
<!--                            <el-submenu index="6">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-picture"></i>-->
<!--                                    <span>广告管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="6-1">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>广告列表</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="6-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>分类管理</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
<!--                            &lt;!&ndash;报表管理&ndash;&gt;-->
<!--                            <el-submenu index="7">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-data-line"></i>-->
<!--                                    <span>报表管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="7-1">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>订单报表</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="7-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>产品销量</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="7-3">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>交易量</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="7-4">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>财务明细</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
<!--                            &lt;!&ndash;系统管理&ndash;&gt;-->
<!--                            <el-submenu index="8">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-data-line"></i>-->
<!--                                    <span>系统管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="8-1">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>首页布局管理</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="8-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>自定义导航栏</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
<!--                            &lt;!&ndash;管理员管理&ndash;&gt;-->
<!--                            <el-submenu index="9">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-user-solid"></i>-->
<!--                                    <span>管理员管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="9-1">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>权限管理-超级管理员版</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="9-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>权限管理-普通管理员版</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="9-3">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>管理员列表</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="9-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>个人信息</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="9-2">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>管理员日志</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
<!--                            &lt;!&ndash;推送消息管理&ndash;&gt;-->
<!--                            <el-submenu index="10">-->
<!--                                <template slot="title">-->
<!--                                    <i class="el-icon-chat-dot-square"></i>-->
<!--                                    <span>推送消息管理</span>-->
<!--                                </template>-->
<!--                                <el-menu-item-group>-->
<!--                                    <el-menu-item index="10-1">-->
<!--                                        <router-link to="/test">-->
<!--                                            <span>消息通知</span>-->
<!--                                        </router-link>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu-item-group>-->
<!--                            </el-submenu>-->
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <!--主体-->
            <el-main :style="{height:lheight2}">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: 'Home',
        components: {},
        data(){
            return{
                lheight: window.innerHeight + 'px',
                lheight2: window.innerHeight-68+'px'
            }
        },
        methods:{

        },
        mounted() {
            let that = this;
            window.onresize = () => {
                that.lheight = window.innerHeight + 'px';
                that.lheight2 = window.innerHeight-68+'px';
            }
        }
    }
</script>

<style scoped lang="less">
    /*顶部样式*/
    .el-col.hBox {
        display: flex;
        height: 68px;
        flex-wrap: nowrap;
        justify-content: space-between;
        background-color: #ff6700;
        align-items: center;

        & > div:first-child {
            & > a {
                display: flex;
                align-items: center;
                font-size: 20px;
                font-weight: bold;
                color: white;

                & > img {
                    margin-left: 15px;
                    margin-right: -10px;
                }
            }
        }

        & > div:nth-child(2) {
            display: flex;

            & > a {
                color: white;

                &:hover {
                    color: #ff6700;

                    & > span {
                        background-color: white;
                    }
                }

                & > span {
                    @kuandu: 40px;
                    display: block;
                    width: @kuandu;
                    height: @kuandu;
                    line-height: @kuandu;
                    text-align: center;
                    border-radius: 50%;
                    margin-right: 20px;
                    font-size: 20px;
                    background-color: rgba(255, 255, 255, 0.4);
                }
            }

            & .qbtn {
                @gaodu: 40px;
                height: @gaodu;
                line-height: @gaodu;
                border-radius: 20px;
                padding: 0 10px;
                margin-right: 20px;
                border: none;
                color: white;
                font-size: 14px;
                background-color: rgba(255, 255, 255, 0.5);
            }

            & img {
                @kuan: 40px;
                width: @kuan;
                height: @kuan;
                border-radius: 50%;
                vertical-align: middle;
                margin-left: -10px;
                margin-right: 15px;
            }
        }
    }

    /*侧边栏样式*/
    .el-menu{
        border-right: 0 !important;
    }
    .el-aside{
        border-right: 1px solid #e6e6e6;
        background-color: #fff;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;

        & .el-col>ul>li{
            border-top: 1px solid rgba(149, 149, 149, 0.26);
            & .el-menu-item-group__title{
                height: 0 !important;
                padding: 0 !important;
            }

            & ul li{
                border-top: 1px solid rgba(149, 149, 149, 0.26);
                padding: 0 !important;
                text-indent: 50px;
                &:first-child{
                    border: 0;
                }
            }
        }

        & a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 56px;
            color: #000;
            text-decoration: none;
            margin: 0 -20px;
            padding: 0 20px;

            &.router-link-exact-active {
                background-color: #ff6700;
                color: #fff;
            }
        }
    }

    /*页面高度相关*/
    .el-container.box{
        width: 100%;
        overflow: hidden;
    }
</style>
